<template>
  <MyModal :config="formConfig" :title="'添加数据'" v-model:open="open">
    <template #form>
      <MyForm :config="formConfig.form" :data="formData">
        <!-- 插槽 -->
        <template #state="{ row }"> {{ row }} </template>
      </MyForm>
    </template>
  </MyModal>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import MyModal from "../components/modal";
import MyForm from "../components/form";
import { ModalFormConig } from "../components/modal/index/types";

const emits = defineEmits(["update:show"]);
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});

const open = ref(false);
watch(
  () => [props.show, open.value],
  () => {
    if (!open.value) {
      emits("update:show", false);
      return;
    }
    open.value = props.show;
    emits("update:show", open.value);
  }
);

interface FormData {
  name: string;
  state: true;
  date: string;
}

const formData = ref({});
const formConfig = ref<ModalFormConig<FormData>>({
  form: {
    //表单项
    items: [
      {
        type: "input",
        label: "姓名",
        name: "name",
        rules: [
          {
            required: true,
            message: "请输入姓名",
          },
        ],
      },
      {
        type: "switch",
        label: "是否启用",
        name: "state",
        slotName: "state",
      },
      {
        type: "date-picker",
        label: "日期",
        name: "date",
        rules: [{ required: true, message: "请选择日期" }],
        datePicker: {
          property: {},
        },
      },
    ],
  },
  //确定操作
  ok({ close }) {
    close();
  },
});
</script>

<style scoped></style>
